import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import { AppOutline, AppstoreOutline, ShopbagOutline, FileOutline, UserOutline } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom'
class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/home',
                    title: '店铺',
                    icon: <AppOutline />,
                },
                {
                    key: '/index/classify',
                    title: '分类',
                    icon: <AppstoreOutline />,
                },
                {
                    key: '/index/allgood',
                    title: '所有商品',
                    icon: <FileOutline />,
                },
                {
                    key: '/index/shopcar',
                    title: '购物车',
                    icon: <ShopbagOutline />,
                },
                {
                    key: '/index/mine',
                    title: '我的',
                    icon: <UserOutline />,
                },
            ],
            activeKey:localStorage.getItem("activeKey") || '/index/home'
        }
    }
    jump(key) {
        // console.log(key);
        this.props.history.push({
            pathname: key,
            state: {
                id: 282657
            }
        });
        this.setState({
            activeKey:key
        })
        localStorage.setItem('activeKey',key)
    }
    render() {
        return (

            <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.jump(key) }}>
                {
                    this.state.tabs.map(item => (
                        <TabBar.Item
                            key={item.key}
                            icon={item.icon}
                            title={item.title}
                            badge={item.badge}
                        />
                    ))
                }
            </TabBar>


        )
    }
}

//withRouter 一个高阶组件 专门用来给没有 location， history，match 这三个路由对象的组件
export default withRouter(MyTabbar);